<!doctype html>
<html ng-app="myapp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="/frame/bootstrap-3.3.4/css/bootstrap.css">
	<link rel="stylesheet" href="myCss.css">
	<link rel="stylesheet" href="/frame/animate_css/animate.css">
	<script src="/frame/angular_js/angular.js"></script>
	<script src="/frame/ui-bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
	<script src="/frame/angular_js/angular-sanitize.js"></script><!-- ng-blind-html -->
	<script src="/frame/angular_js/angular-resource.js"></script><!-- restful编程 -->
	<script src="/frame/angular_js/angular-animate.js"></script><!-- 动画 -->
	<script src="/frame/angular_js/angular-cookies.js"></script><!-- cookies -->
	
	<script type="text/javascript" charset="utf-8" src="/frame/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="/frame/ueditor/ueditor.all.js"> </script>
	<script src="app.js"></script>
</head>
<body ng-controller="BodyCtrl">
	<!-- 弹出的框内容开始，登录模态框  'ModalInstanceCtrl-->
	<script type="text/ng-template" id="myModalContent.html">
		<div class="panel panel-success" >
  			<div class="panel-heading text-center">
    			<h1>登录</h1>
  			</div>
  			<div class="panel-body">
		    	<form class="form-horizontal">
		    		<!--头像图片轮播 -->
		    		<div class="row">
						<div class="col-sm-offset-1 col-sm-10">
							<carousel interval="0">
								<slide ng-repeat="slide in (slides | filter:sexual)" active="slide.active">
									<img ng-src="{{slide.image}}" style="margin:auto;">				
									<div >
										<h3>&nbsp</h3><!--用空格让小圆圈下移融入白色的背景中 -->
									</div>
								</slide>
							</carousel>
						</div>
					</div>
					<br/>
					<!--昵称文本框 -->
					<div class="form-group ">
						<label class="col-sm-offset-1 col-sm-2 control-label">用户名:</label>
						<div class="col-sm-8">
							<div  class="input-group" ng-class="{'has-error':isNameEmpt}">
							<!--glyphicon 具有top：1 -->
  								<span class="input-group-addon glyphicon glyphicon-user" style="top:0px" ></span>
  								<input autofocus ng-keyup="myKeyup($event)" style="vertical-align:middle;" ng-model="cachUser.Name"  class="form-control " placeholder="{{nametip}}">
							</div>
						</div>	  
					</div>
					<!--男女选择 -->
					<div class="form-group ">
						<div class="col-sm-offset-3 col-sm-2">
							<label><input ng-keyup="myKeyup($event)" type="radio" name="optionsRadios" ng-model="sexual" value="male" checked>男</label>
						</div>
						<div class="col-sm-3">
							<label><input ng-keyup="myKeyup($event)" type="radio" name="optionsRadios" ng-model="sexual" value="girl">女</label>
						</div>
					</div>

					<div class="row">
						<div class="col-sm-offset-2 col-sm-8">
							<button ng-click="login()" type="button" class="btn btn-success btn-lg btn-block">登录</button>
						</div>
					</div>
				
					</br>
					</br>
				</form>
  			</div>
		</div>
	</script>
	<!-- 弹出的框内容结束  -->

	<div class="container my-root-pan ">
		<div class="row">
			<!-- 好友列表 -->
			<div ng-controller="userListCtrl" class="col-md-3 col-sm-3">
				<div  class="my-left-pan well">
					<div ng-repeat="user in $root.gUserList.OnlineUsers" class="well" style="padding:2px;"><!-- 动画类animated infinite flash -->
						<img src="{{user.HeadImg}}" alt=""  width="50px" >
						{{user.Name}}
						<span class="badge" style="background-color:red;margin:0px 0px 0px 20px">{{user.SendMsgNum}}</span>
					</div>
				</div>
			</div>
			<div ng-controller="ueCtrl" class="col-md-9 col-sm-9 my-right-pan well">
				<!-- 消息框 当msgCount改变时移动到底部-->
				<div id="bottom" class="my-rightTop-pan well" scroll-to-bottom style="padding:2px 2px;overflow-y:auto;" >
					<div ng-repeat="msg in $root.gUserList.MsgList"  ng-style="stypleLeftOrRight(msg)">
						<div style="display:inline-block;margin:0px 20px 0px 0px">
							<img ng-src="{{msg.HeadImg}}" width="40px"><!-- 头像图标 -->
							<span >{{msg.Name}}</span>
							<small style="color:rgb(200,200,200);">{{msg.Time}}</small><!-- 消息发送的时间,小型字体 -->
							<!-- 消息内容 -->
							<div style="padding:0px 0px 0px 50px;text-align:left;">
								<div class="well my-msgleft"  ng-bind-html="msg.Msg | to_trusted"></div>
							</div>
						</div>
					</div>
				</div>
				<!-- 编辑框 -->
				<div class="my-rightBottom-pan">
					<div>
						<script id="editor" type="text/plain" style="width:100%;height:120px;"></script>
						<div class="text-right">
							<button class="btn btn-primary btn-sm " ng-click="sendMsg()">发送信息</button>
						</div>
						<script type="text/javascript">
							var ue = UE.getEditor('editor');
							//一定要在上面的dom的后面要不还没创建是不能得到id的

						</script>
					</div>
				</div>


			</div>
		</div>
	</div>
</body>
</html>